/*
  学习目标：Hooks-补充
  useHistory:  获取history对象
  区别:
    1. useHistory 任意的函数式组件中, 都可以使用
    2. props.history 只能是组件经过Route设置匹配规则, 才能使用
*/

import React from "react";
import {
  BrowserRouter as Router,
  Route,
  Switch,
  useHistory,
} from "react-router-dom";

export default function App() {
  return (
    <Router>
      <Switch>
        <Route component={Header} path="/header" />
      </Switch>
      <Footer />
    </Router>
  );
}

function Header() {
  const history = useHistory();
  return (
    <>
      <h1>Header</h1>
      <button onClick={() => history.push("/footer")}>点我跳到footer</button>
    </>
  );
}

function Footer() {
  // 可以在任意的函数式组件中,  获取history
  const history = useHistory();
  console.log("history  ----->  ", history);

  return (
    <>
      <h1>Footer</h1>
      <button onClick={() => history.push("/header")}>点我跳转到header</button>
    </>
  );
}
